<!--
 @description 经销商档案管理-商家档案管理
 @fileName index.vue
 @author zengqiongying
 @created 2023/04/13 15:29:51
-->
<template>
  <div>
    <div class="ctm-content-head-fixed">
      <SearchInput
        v-model="searchValue"
        placeholder="输入客户编码/客户名称"
        @search="onSearch"
        @clear="onClear"
        @cancel="onSearch"
      />
    </div>

    <div class="ctm-content-tabs-sticky">
      <qmp-tabs
        ref="qmpTabs"
        v-model:active="activeTab"
        lazy-render
        @click-tab="tabOnChange"
        animated
        class="tab-nav-transparent"
      >
        <qmp-tab v-for="(tab, i) in tabs" :key="i" :title="tab.title" :name="tab.name">
          <RetailCustomer
            class="customer-list"
            :ref="(el) => setListRef(el, tab.name)"
            :search-value="searchValue"
            :type="tab.name"
          />
        </qmp-tab>
      </qmp-tabs>
    </div>
  </div>
</template>

<script lang="ts">
  import { ref, reactive, toRefs, onMounted, getCurrentInstance, nextTick } from 'vue'
  import { onBeforeRouteLeave } from 'vue-router'
  import { useStore } from 'vuex'
  import SearchInput from '@/components/SearchInput/index.vue'
  import RetailCustomer from './components/List.vue'
  export default {
    name: 'DealerInfoCustomer',
    components: { SearchInput, RetailCustomer },
    setup() {
      const $store = useStore()
      const instance = getCurrentInstance()
      const qmpTabs = ref()
      const datas = reactive({
        searchValue: '',
        activeTab: 'retailCustomer',
        tabs: [
          { title: '零售商客户', name: 'retailCustomer' },
          { title: '轻居客户', name: 'lightCustomer' }
        ]
      })

      const listRefs: {
        [key: string]: any
      } = {}
      const setListRef = (el: any, name: string) => {
        if (el) {
          listRefs[name] = el
        }
      }
      const tabOnChange = () => {
        nextTick(() => {
          listRefs[`${datas.activeTab}`] && listRefs[`${datas.activeTab}`].resetPageData()
        })
      }
      const onSearch = () => {
        // 搜索
        tabOnChange()
      }
      const onClear = () => {
        // 搜索
        tabOnChange()
      }
      onMounted(() => {})
      onBeforeRouteLeave((to, from, next) => {
        const instanceName = instance?.type?.name
        if (to.name === 'Index') {
          $store.commit('routerKeep/removeCache', instanceName)
        } else {
          $store.commit('routerKeep/resetCache', instanceName)
        }
        next()
      })
      return {
        ...toRefs(datas),
        qmpTabs,
        onSearch,
        onClear,
        tabOnChange,
        setListRef
      }
    }
  }
</script>
<style lang="less" scoped>
  .customer-list {
    position: relative;
    padding: 0 14px;
  }
</style>
